<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <title>ztree分类展示</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/css/metroStyle/metroStyle.css">
    <%--<link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/zTreeStyle/zTreeStyle.css">--%>

</head>
<body class="layui-layout-body">

<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>


<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/ztree/js/jquery-1.4.4.min.js"></script>
<script src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.all.js"></script>
<script>
    $(function () {
        var settings = {
            data: {
                simpleData: {
                    enable: true,  //true , false 分别表示 使用  不使用 简单数据模式
                }
            },
            callback: {
                onClick: onClick
            }
        };


        $.ajax({
            url:"${pageContext.request.contextPath}/categories/ztree",
            success: function (result) {
                zTreeObj = $.fn.zTree.init($("#treeDemo"), settings, result.data); //初始化树
            }
        })
        function onClick(event, treeId, treeNode, clickFlag) {
            console.log(treeNode.id);
        }

    })
</script>
</body>
</html>